﻿<style>
    .layui-upload-img {
        width: 100px;
        height: auto;
        margin-left:2px;
        margin-right:10px;
    }
</style>
<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">

    <script type='text/html' template lay-done='layui.data.formdone(d.params);'>
        <input type='hidden' name='PID' value="{{ d.params.PID || '' }}" />
    </script>
    <div class='layui-form-item'>
        <label class='layui-form-label'>主题名称 <label style="color: red">*</label></label>
        <div class='layui-input-inline' style="width:350px;">
            <script type='text/html' template>
                <input type='text' name='Name' value='{{ d.params.Name || '' }}' lay-verify='required' placeholder='主题名称' autocomplete='off' class='layui-input'>
            </script>
        </div>
    </div>
    <div class='layui-form-item'>
        <label class='layui-form-label'>主图<span style="color:red">*</span></label>
        <div class='layui-input-inline' style="width:80%">
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="selectImg">选择图片</button> <span id="imgsp">建议尺寸 718px * 301px</span>
                <div class="layui-upload-list" id="divImgs"></div>
                <script type='text/html' template lay-done='layui.data.setUploads(d.params);'>
                    <input type="hidden" name="Image_Upload" id="Image_Upload" value="{{ d.params.Image_Upload || '' }}">
                </script>
                <hr />
            </div>
        </div>
    </div>
    <div class='layui-form-item'>
        <label class='layui-form-label'>商品信息 <label style="color: red">*</label></label>
        <div class='layui-input-block'>
            <script type='text/html' template lay-done='layui.data.floors(d.params);'>
                <div style="margin:12px;">
                    <span style="font-weight:bold;color:#000000;">楼层1：</span>
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" id="selectImg1">上传分割图</button>
                    <img id='ImgSrc1' src='' alt="" class="layui-upload-img">
                    <button type="button" onclick="SelGoods(1)" class="layui-btn layui-btn-xs">选择楼层商品</button>
                    <span style="color:#a4a4a4;font-size:0.8em;">已选中<span style="color:red;font-size:14px;" id="num1">0</span>个商品</span>
                    <input type='hidden' name='Img1' id="Img1">
                    <input type='hidden' name='Goods1' id="Goods1">
                </div>
                <!--<div style="margin:12px;">
                    <span style="font-weight:bold;color:#000000;">楼层2：</span>
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" id="selectImg2">上传分割图</button>
                    <img id='ImgSrc2' src='' alt="" class="layui-upload-img">
                    <button type="button" onclick="SelGoods(2)" class="layui-btn layui-btn-xs">选择楼层商品</button>
                    <span style="color:#a4a4a4;font-size:0.8em;">已选中<span style="color:red;font-size:14px;" id="num2">0</span>个商品</span>
                    <input type='hidden' name='Img2' id="Img2">
                    <input type='hidden' name='Goods2' id="Goods2">
                </div>
                <div style="margin:12px;">
                    <span style="font-weight:bold;color:#000000;">楼层3：</span>
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" id="selectImg3">上传分割图</button>
                    <img id='ImgSrc3' src='' alt="" class="layui-upload-img">
                    <button type="button" onclick="SelGoods(3)" class="layui-btn layui-btn-xs">选择楼层商品</button>
                    <span style="color:#a4a4a4;font-size:0.8em;">已选中<span style="color:red;font-size:14px;" id="num3">0</span>个商品</span>
                    <input type='hidden' name='Img3' id="Img3">
                    <input type='hidden' name='Goods3' id="Goods3">
                </div>
                <div style="margin:12px;">
                    <span style="font-weight:bold;color:#000000;">楼层4：</span>
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" id="selectImg4">上传分割图</button>
                    <img id='ImgSrc4' src='' alt="" class="layui-upload-img">
                    <button type="button" onclick="SelGoods(4)" class="layui-btn layui-btn-xs">选择楼层商品</button>
                    <span style="color:#a4a4a4;font-size:0.8em;">已选中<span style="color:red;font-size:14px;" id="num4">0</span>个商品</span>
                    <input type='hidden' name='Img4' id="Img4">
                    <input type='hidden' name='Goods4' id="Goods4">
                </div>
                <div style="margin:12px;">
                    <span style="font-weight:bold;color:#000000;">楼层5：</span>
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" id="selectImg5">上传分割图</button>
                    <img id='ImgSrc5' src='' alt="" class="layui-upload-img">
                    <button type="button" onclick="SelGoods(5)" class="layui-btn layui-btn-xs">选择楼层商品</button>
                    <span style="color:#a4a4a4;font-size:0.8em;">已选中<span style="color:red;font-size:14px;" id="num5">0</span>个商品</span>
                    <input type='hidden' name='Img5' id="Img5">
                    <input type='hidden' name='Goods5' id="Goods5">
                </div>
                <div style="margin:12px;">
                    <span style="font-weight:bold;color:#000000;">楼层6：</span>
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" id="selectImg6">上传分割图</button>
                    <img id='ImgSrc6' src='' alt="" class="layui-upload-img">
                    <button type="button" onclick="SelGoods(6)" class="layui-btn layui-btn-xs">选择楼层商品</button>
                    <span style="color:#a4a4a4;font-size:0.8em;">已选中<span style="color:red;font-size:14px;" id="num6">0</span>个商品</span>
                    <input type='hidden' name='Img6' id="Img6">
                    <input type='hidden' name='Goods6' id="Goods6">
                </div>-->
                <span style="color:green">注：<!--最多支持6层商品，每层-->商品不得超过30个，楼层分割图建议尺寸：718px * 38px</span>
                
            </script>
        </div>
    </div>
    <div class='layui-form-item'>
        <label class='layui-form-label'>背景颜色</label>
        <div class="layui-input-inline" style="width: 120px;">
            <script type='text/html' template lay-done='layui.data.getColor(d.params);'>
                <input type="text" id="Color" name="Color" value="{{ d.params.Color || "" }}" readonly="readonly" placeholder="请选择颜色" class="layui-input">
            </script>
        </div>
        <div class="layui-inline" style="left: -11px;">
            <div id="test-form"></div>
        </div>
    </div>
    <div class='layui-form-item'>
        <label class='layui-form-label'>主题说明</label>
        <div class='layui-input-inline' style="width:350px;">
            <script type='text/html' template>
                <textarea name="DescStr" placeholder="请输入内容" class="layui-textarea">{{ d.params.DescStr || '' }}</textarea>
            </script>
        </div>
    </div>
    <!--<div class='layui-form-item'>
        <label class='layui-form-label'>备注</label>
        <div class='layui-input-inline' style="width:350px;">
            <script type='text/html' template>
                <input type='text' name='RMK' value='{{ d.params.RMK || '' }}' lay-verify='' placeholder='备注' autocomplete='off' class='layui-input'>
            </script>
        </div>
    </div>-->
    <!--<div class='layui-form-item'>
        <label class='layui-form-label'>其他</label>
        <div class='layui-input-inline'>
            <script type='text/html' template>
                <input type='text' name='Other1' value='{{ d.params.Other1 || '' }}' lay-verify='required' placeholder='其他' autocomplete='off' class='layui-input'>
            </script>
        </div>
    </div>
    <div class='layui-form-item'>
        <label class='layui-form-label'>其他</label>
        <div class='layui-input-inline'>
            <script type='text/html' template>
                <input type='text' name='Other2' value='{{ d.params.Other2 || '' }}' lay-verify='required' placeholder='其他' autocomplete='off' class='layui-input'>
            </script>
        </div>
    </div>-->
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" value="确认" class="layui-btn">
        </div>
    </div>
</div>

<script type="text/javascript">

    var checkIDs = []; //选中的ID
    var lindex = "";
    var viewid = "";

    layui.use(['form'], function () {
        var form = layui.form;//required（必填项）phone（手机号）email（邮箱）url（网址）number（数字）date（日期）identity（身份证） 自定义值
    });

    layui.data.getColor = function (d) {
        layui.use(['form', 'admin', 'colorpicker'], function () {
            var $ = layui.$;
            var form = layui.form;
            var admin = layui.admin;
            var colorpicker = layui.colorpicker;

            var color = "#eeeeee";
            if (d.Color != "" && d.Color != null)
                color = d.Color;
            else
                $('#Color').val(color);
            //表单赋值
            colorpicker.render({
                elem: '#test-form'
                , color: color //设置默认色
                , done: function (color) {
                    $('#Color').val(color);
                }
            });
        });
    }

    layui.data.setUploads = function (d) {
        layui.use(['jquery', 'upload', 'admin'], function () {
            window.jQuery = window.$ = layui.jquery;
            upload = layui.upload,
                admin = layui.admin;
            //多图上传
            var uploadInst = upload.render({
                elem: '#selectImg'
                , url: '/WebAPI/file/uploadImgNew?access_token=' + layui.data('layuiAdmin').access_token
                , acceptMime: 'image/*'
                , multiple: false
                , done: function (res) {
                    if (res.ResultCode == 0) {
                        addImg(res.Data);
                        layer.msg('上传成功');
                    } else {
                        layer.msg(res.ResultInfo);
                    }
                }
            });
            var pics = d.Image_Upload;
            if (pics != "" && pics != null && pics != 'null') {
                addImg({ name: pics, path: layui.setter.ImgPath + pics });
            }
        })
    }

    function addImg(src) {
        var div = "divimg3";
        var img = "Img3";
        var html = "    <div style=\"line-height:100px;float:left\" id='" + div + "'> " +
            " <a style=\"float:right;line-height:10px;background-color:#ff0000;font-size:24px;color:white;border-top:3px solid #ff0000\" onclick=\"deletp3()\">×</a> " +
            " <img id='" + img + "' src=\"" + src.path + "\"   alt=\"\" class=\"layui-upload-img\">" +
            "</div>";
        $('#divImgs').html(html);
        $("#Image_Upload").val(src.name);
    }
    //删除图片
    function deletp3() {
        $('#divImgs').html("");
        $("#Image_Upload").val("");
    }


    layui.data.floors = function (d) {
        layui.use(['jquery', 'upload', 'admin'], function () {
            window.jQuery = window.$ = layui.jquery;
            upload = layui.upload,
                admin = layui.admin;

            upload.render({
                elem: '#selectImg1'
                , url: '/WebAPI/file/uploadImgNew?access_token=' + layui.data('layuiAdmin').access_token
                , acceptMime: 'image/*'
                , multiple: false
                , done: function (res) {
                    if (res.ResultCode == 0) {
                        AddFloorImg(res.Data, 1);
                        layer.msg('上传成功');
                    } else {
                        layer.msg(res.ResultInfo);
                    }
                }
            });
            upload.render({
                elem: '#selectImg2'
                , url: '/WebAPI/file/uploadImgNew?access_token=' + layui.data('layuiAdmin').access_token
                , acceptMime: 'image/*'
                , multiple: false
                , done: function (res) {
                    if (res.ResultCode == 0) {
                        AddFloorImg(res.Data, 2);
                        layer.msg('上传成功');
                    } else {
                        layer.msg(res.ResultInfo);
                    }
                }
            });
            upload.render({
                elem: '#selectImg3'
                , url: '/WebAPI/file/uploadImgNew?access_token=' + layui.data('layuiAdmin').access_token
                , acceptMime: 'image/*'
                , multiple: false
                , done: function (res) {
                    if (res.ResultCode == 0) {
                        AddFloorImg(res.Data, 3);
                        layer.msg('上传成功');
                    } else {
                        layer.msg(res.ResultInfo);
                    }
                }
            });
            upload.render({
                elem: '#selectImg4'
                , url: '/WebAPI/file/uploadImgNew?access_token=' + layui.data('layuiAdmin').access_token
                , acceptMime: 'image/*'
                , multiple: false
                , done: function (res) {
                    if (res.ResultCode == 0) {
                        AddFloorImg(res.Data, 4);
                        layer.msg('上传成功');
                    } else {
                        layer.msg(res.ResultInfo);
                    }
                }
            });
            upload.render({
                elem: '#selectImg5'
                , url: '/WebAPI/file/uploadImgNew?access_token=' + layui.data('layuiAdmin').access_token
                , acceptMime: 'image/*'
                , multiple: false
                , done: function (res) {
                    if (res.ResultCode == 0) {
                        AddFloorImg(res.Data, 5);
                        layer.msg('上传成功');
                    } else {
                        layer.msg(res.ResultInfo);
                    }
                }
            });
            upload.render({
                elem: '#selectImg6'
                , url: '/WebAPI/file/uploadImgNew?access_token=' + layui.data('layuiAdmin').access_token
                , acceptMime: 'image/*'
                , multiple: false
                , done: function (res) {
                    if (res.ResultCode == 0) {
                        AddFloorImg(res.Data, 6);
                        layer.msg('上传成功');
                    } else {
                        layer.msg(res.ResultInfo);
                    }
                }
            });
        })
    }

    function AddFloorImg(src, xh) {
        $("#ImgSrc" + xh).attr("src", src.path)
        $("#Img" + xh).val(src.name);
    }



    layui.data.formdone = function (d) {
        var $ = layui.$;

        var GoodIds = d.GoodIds;
        if (GoodIds != "" && GoodIds != null && GoodIds != "[]") {
            //debugger;
            var Goods = JSON.parse(GoodIds);
            for (var i = 1; i <= Goods.length; i++) {
                var Good = Goods[i - 1];
                AddFloorImg({ name: Good.Img, path: layui.setter.ImgPath + Good.Img }, i);
                $("#num" + i).text(Good.GoodIds.length);
                $("#Goods" + i).val(JSON.stringify(Good.GoodIds));
            }
        }
    }

    function SelGoods(xh) {
        var view = layui.view;
        var admin = layui.admin;
        var $ = layui.$;

        checkIDs = [];
        var Goods = $("#Goods" + xh).val();
        if (Goods != "") {
            checkIDs = JSON.parse(Goods);
        }

        admin.popup({
            title: '商品列表'
          , skin: 'layui-layer-lan'
          , area: ['85%', '96%']
          , zIndex: 1002
          , shadeClose: false
          , id: 'LAY-popup-content-add2'
          , success: function (layero, index) {
              lindex = index;
              view(this.id).render('/shop/shop_Goods/SelGoods').done(function () {
                  //form.render(null, 'layuiadmin-app-form-list');

                  var active = {
                      confirm: function () {
                          if (checkIDs.length === 0) {
                              return layer.msg('请选择数据');
                          }
                          if (checkIDs.length > 30) {
                              return layer.msg('单层最多选择30个商品');
                          }

                          var count = checkIDs.length;
                          var goodids = JSON.stringify(checkIDs);
                          $("#num" + xh).text(count);
                          $("#Goods" + xh).val(goodids);

                          layer.close(lindex);
                      },
                      clearall: function () {
                          checkIDs = [];
                          $("#num" + xh).text(0);
                          $("#Goods" + xh).val("");

                          layer.close(lindex);
                      },
                  };


                  $('.layui-btn.layuiadmin-btn-list').on('click', function () {
                      var type = $(this).data('type');
                      active[type] ? active[type].call(this) : '';
                  });
              });
          }
        });
    }


    //获取商品信息
    function GetGoods() {
        //debugger;
        var Goods = [];
        for (var i = 1; i <= 6; i++) {
            var Img = $("#Img" + i).val();
            var Goodids = $("#Goods" + i).val();
            if (Goodids != "") {
                if(Img == ""){
                    layer.msg("请上传楼层" + i + "分割图！");
                    return "";
                }

                var Good = {};
                Good["Img"] = Img;
                Good["GoodIds"] = JSON.parse(Goodids);
                Goods.push(Good);
            }
        }
        if (Goods.length <= 0) {
            layer.msg("请至少选择一个楼层商品！");
            return "";
        }

        var res = JSON.stringify(Goods);
        return res;
    }


</script>
